<template>
	<view class="feedback-page">
		<ul>
			<li>
				<div class="left">
					<span>姓名</span>
					<input v-model="feedbackForm.nickname" placeholder-class="placeholder" placeholder="请输入姓名"
						type="text">
				</div>
			</li>
			<li>
				<div class="left">
					<span>联系方式</span>
					<input v-model="feedbackForm.mobile" placeholder-class="placeholder" placeholder="请输入联系方式"
						type="text">
				</div>
			</li>
			<li>
				<div class="left">
					<span>邮箱</span>
					<input v-model="feedbackForm.email" placeholder-class="placeholder" placeholder="请输入邮箱" type="text">
				</div>
			</li>
			<li>
				<div class="left">
					<span>内容</span>
					<textarea v-model="feedbackForm.message" placeholder-class="placeholder" placeholder="请输入内容" name=""
						id="" cols="30" rows="10"></textarea>
				</div>
			</li>

		</ul>
		<SSButton @click="getFeedback" class="feedback-btn" title="提交" />
	</view>
</template>

<script>
	import SSButton from '@/components/Button.vue'
	export default {
		components: {
			SSButton
		},
		data() {
			return {
				feedbackForm: {
					nickname: '',
					mobile: '',
					email: '',
					message: '',
				}
			};
		},
		methods: {
			async getFeedback() {
				let verify = Object.values(this.feedbackForm).every(x => x)
				if (!verify) return uni.showToast({
					title: "请填写完整表单",
					icon: 'none'
				})
				const { 
					msg,
					code
				} = await this.$http.User.feedback(this.feedbackForm)

				uni.showToast({
					title: code == 200 ? '提交成功' : msg,
					icon: "none"
				})


				if (code == 200) this.feedbackForm = {
					nickname: '',
					mobile: '',
					email: '',
					message: '',
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.feedback-page {
		padding-bottom: calc(10upx + env(safe-area-inset-bottom));

		ul {
			background: #fff;
			box-shadow: 0px 0px 10px 2px rgba(241, 241, 241, 1);
			border-radius: 8upx;
			margin: 0 32upx;
			margin-top: 10upx;
			margin-bottom: 32upx;
			padding-bottom: 424upx;

			li {
				margin: 0 32upx;
				border-bottom: 1px solid #EEEEEE;
				display: flex;
				align-items: center;
				padding: 32upx 0;
				padding-bottom: 20upx;

				&:last-of-type {
					border-bottom: unset;
				}

				.left {
					flex: 1;
					display: flex;
					flex-direction: column;

					span {
						color: #666E7A;
						font-size: 24upx;
						line-height: 24upx;
						font-weight: 400;
						padding-bottom: 34upx;
					}

					input {
						color: #28211F;
						font-size: 24upx;
						line-height: 24upx;
						font-weight: 500;
						height: 24upx;
					}

					textarea {
						border: 1px solid #eee;
						padding: 20upx 22upx;
						color: #333;
						font-size: 24upx;
						width: 622upx;
						box-sizing: border-box;
					}

					.placeholder {
						color: #ccc;
						font-size: 24upx;
					}
				}

				image {
					width: 36upx;
					height: 36upx;
				}

			}
		}

		.feedback-btn {
			.global-button {
				margin-top: 66upx;

			}
		}

	}
</style>
